<template>

  <Tabs name="properties" v-model="active">
    <TabPane label="组件属性" name="item" tab="properties" icon="md-cube">
      <ItemProperties :selectItem="selectItem" ref="itemProperties">
        <template slot="custom-properties" :selectItem="selectItem">
          <slot name="custom-properties" :selectItem="selectItem"></slot>
        </template>
      </ItemProperties>
    </TabPane>
    <TabPane label="表单属性" name="form" tab="properties" icon="md-paper">
      <FormProperties ref="formProperties"
                      :config="data.config"
                      :previewOptions="previewOptions"
      >
        <template slot="form-extend-properties" :data="data">
          <slot name="form-extend-properties" :data="data"></slot>
        </template>
      </FormProperties>
    </TabPane>

    <slot name="extend-tab" :data="data">

    </slot>

  </Tabs>


</template>
<script>
import ItemProperties from './item-properties';

import FormProperties from './form-properties';

export default {
  components: {
    ItemProperties, FormProperties,/*,ItemProperties2*/
  },
  props: {
    data: {
      type: Object,
      default: () => {
      },
    },
    selectItem: {
      type: Object,
      default: () => {
      },
    },
  },
  watch: {
    selectItem(val) {
      this.active = 'item';
    },
  },
  data() {
    return {

      active: 'item',
      previewOptions: {
        width: 850,
      },
    };
  },
  methods: {},
};
</script>
